/* HTML Global Comment */
.token:is(.comment) {
  opacity: 0.55;
}
/* HTML Tag, DOCTYPE Tag, RegEx */
.token:is(.tag,.doctype-tag,.regex) {
  color: hsl(359,90%,48%);
}
:host(.color-scheme-dark) .token:is(.tag,.doctype-tag,.regex) {
  color: hsl(359,90%,68%);
}
/* Global Punctuation */
.token:is(.punctuation) {
  color: var(--color);
}
.token:is(.punctuation), .language-html :is(.language-css,.language-javascript) .token:is(.punctuation) {
  opacity: 0.7;
}
.token:is(.tag,.doctype) .token:is(.punctuation) {
  opacity: 0.5;
}
/* HTML Attribute Name, CSS Selector, Global Number, Global Boolean, DOCTYPE Name */
.token:is(.attr-name,.selector,.number,.boolean), .token.doctype .token.name {
  color: hsl(35,80%,36%);
}
:host(.color-scheme-dark) .token:is(.attr-name,.selector,.number,.boolean), :host(.color-scheme-dark) .token.doctype .token.name {
  color: hsl(35,80%,68%);
}
/* CSS Property */
.token:is(.property) {
  color: hsl(180,37%,37%);
}
:host(.color-scheme-dark) .token:is(.property) {
  color: hsl(180,37%,68%);
}
/* HTML Attribute Value, Global String, HTML Attribute Value Punctuation */
.token:is(.attr-value,.string), .token:is(.attr-value) .token.punctuation:not(.attr-equals) {
  color: hsl(117,47%,36%);
}
.token:is(.attr-value) .token.punctuation:not(.attr-equals) {
  opacity: 1;
}
:host(.color-scheme-dark) .token:is(.attr-value,.string), :host(.color-scheme-dark) .token:is(.attr-value) .token.punctuation:not(.attr-equals) {
  color: hsl(117,47%,68%);
}
/* CSS Important */
.token:is(.important) {
  color: hsl(58,80%,27%);
}
:host(.color-scheme-dark) .token:is(.important) {
  color: hsl(58,80%,68%);
}
/* CSS Function, JavaScript Function */
.token:is(.function) {
  color: hsl(208,78%,45%);
}
:host(.color-scheme-dark) .token:is(.function) {
  color: hsl(208,78%,68%);
}
/* Global Class Name */
.token:is(.class-name) {
  color: hsl(45,80%,27%);
}
:host(.color-scheme-dark) .token:is(.class-name) {
  color: hsl(45,80%,68%);
}
/* Global Operator */
.token:is(.operator) {
  color: hsl(175,54%,33%);
}
:host(.color-scheme-dark) .token:is(.operator) {
  color: hsl(175,54%,68%);
}
/* CSS Rule, JavaScript Keyword */
.token:is(.rule,.keyword) {
  color: hsl(273,75%,50%);
}
:host(.color-scheme-dark) .token:is(.rule,.keyword) {
  color: hsl(273,75%,78%);
}